<template>
	<view class="content">
		<!-- <view class="serbox">
			<image :src="'/images/search.png' | formatImgUrl" class="serpic" mode=""></image>
			<input type="text" class="serput" placeholder="搜标签" :disabled="true" @tap="$go('/showcase/tip/searchResult')">
		</view> -->
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back">
			<view slot="center">
				<view class="serbox">
					<image :src="'/images/search.png' | formatImgUrl" class="serpic" mode=""></image>
					<input type="text" class="serput" placeholder="搜标签" :disabled="true" @tap="$go('/showcase/tip/searchResult')" style="width: 500rpx;">
				</view>
			</view>
		</u-navbar>
		
		<view class="tip_wrap" v-for="(item,index) in list">
			<view class="header">
				<image :src="'/images/new_tag01.png' | formatImgUrl" alt="" srcset="">
				</image>
				<text class="title">
					{{item.class_title || item.name}}
					<text class="choose">共选择<text>{{item.list.filter(item => item.selected).length}}</text>个标签</text>
				</text>
				
				<view class="more" @click="looks(item)">
					去选择
				</view>
			</view>
			<view class="wrap" >
				<view class="tag act" v-if="item.list.filter(item => item.selected).length==0">
					未选择
				</view>
				<view v-if="items.selected" class="tag" v-for="(items,indexs) in item.list"  @click="selectedTag(item.list,indexs)" :class="items.selected ?'act':''">
					{{items.title  || items.names}}
					<!-- <img :src="'/images/tag_close.png' | formatImgUrl" alt="" v-if="items.selected" @click.stop='deleteTag(item.list,indexs)'> -->
				
					<image :src="'/images/iconhot.png' | formatImgUrl" class="hot_img" v-if="items.is_hot == 1"></image>
				</view>
			</view>
		</view>
		<!-- <view class="tip_wrap">
			<view class="header">
				<img :src="'/images/new_tag01.png' || formatImgUrl" alt="" srcset="">
				<text class="title">
					风格
					<text class="choose">请选择</text>
				</text>
			</view>
			<view class="wrap" >
				<view class="tag"  @click="selectedWait" :class="_selected ?'act':''">
					待选择
					<img :src="'/images/tag_close.png' || formatImgUrl" alt="" v-if="_selected" @click.stop='deleteWait'>
				</view>
				
			</view>
		</view> -->
		
		<!-- 底部 -->
		<view class="footer">
			<view class="wrap">
				<view class="wrap_left">
					<view class="top">
						<text class="choose">选择标签</text>
						<text class="num">您已选择{{selectedItem.length}}个标签</text>
					</view>
					<view class="bottom">
						点击可查看符合要求的写手
					</view>
				</view>
				<view class="wrap_right" @click="onMatch">
					寻找写手
				</view>
			</view>
		</view>
		
		<!-- 侧边 -->		
		<u-popup :show="moreShow" mode="right"  @close="close" @open="open" :overlay='true' bgColor='#ffffff!important'>
			<view class="popup__content" v-if="info">
				<view class="tip_wrap">
					<view class="header">
						<image :src="'/images/tip_icon.png'| formatImgUrl" alt="" srcset="">
							</image>
						<text class="title" >
							{{info.class_title || info.name}}
						</text>
						<!-- <view class="more" @click="$go('/showcase/tip/add')">
							增加标签
						</view> -->
						
					</view>
					<view class="choose">共选择<text>{{info.list.filter(item => item.selected).length}}</text>个标签</view>
					<scroll-view scroll-y="true" class="wrap-scroll">
						<view class="wrap" style="margin-top: 0;padding-top: 10px;padding-right: 10px;">
							<view class="tag" style="width: 162rpx;" v-for="(items,indexs) in info.list" @click="selectedTag(info.list,indexs)" :class="items.selected ?'act':''">
								{{items.title || items.names}}
								<!-- <img :src="'/images/tag_close.png' | formatImgUrl" @tap.stop="deleteTag(info.list,indexs)" alt="" v-if="items.selected" > -->
							
								<image :src="'/images/iconhot.png' | formatImgUrl" class="hot_img" v-if="items.is_hot == 1"></image>
							</view>
						</view>
						
					</scroll-view>
					
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="matchShow" mode="bottom" :round="10" :overlay='true' bgColor='#ffffff!important'  @close="matchClose">
			<view class="match_content">
				<view class="title">
					选择匹配方式
				</view>
				<view class="choose_list">
					<view :class="type=='1'? 'item active':'item'" @click="chooseType(1)">
						<image :src="'/images/match_one.png' | formatImgUrl" class="match_img"></image>
						<view class="tit">精准匹配</view>
						<view class="info">
							完全符合要求的写手
						</view>
						<view class="selected" v-if="type=='1'">
							<u-icon name="checkbox-mark" color="#fff" size="18"></u-icon>
						</view>
					</view>
					<view :class="type=='2'? 'item active':'item'" @click="chooseType(2)">
						<image :src=" '/images/match_two.png' | formatImgUrl" class="match_img"></image>
						<view class="tit">优选匹配</view>
						<view class="info">
							大致符合要求的写手
						</view>
						<view class="selected" v-if="type=='2'">
							<u-icon name="checkbox-mark" color="#fff" size="18"></u-icon>
						</view>
					</view>
				</view>
				<button class="submit" @click="star_task()">开始匹配</button>
			</view>
		</u-popup>
		
		<!-- <dLoading :status="loading"></dLoading> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moreShow: false,
				matchShow: false,
				type:1,
				list:[],
				info:null,
				tip_ids:"1,2,3,4,5",
				selectedItem:[], // 此为选中的标签数组
				_selected: false,
				like: '',
				loading: ''
			}
		},
		onLoad() {
			this.get_last();
		},
		onShow() {
			if(uni.getStorageSync('selectedList')){
				this.list = uni.getStorageSync('selectedList')
				this.selectedItem = uni.getStorageSync('selectedItem')
			}
		},
		onHide(){
			console.log('onHide');
		},
		onUnload() {
			console.log('onUnload');
			
			if(uni.getStorageSync('selectedList')){
				uni.removeStorageSync('selectedList')
			}
			if(uni.getStorageSync('selectedItem')){
				uni.removeStorageSync('selectedItem')
			}
		},
		methods:{
			onMatch(){
				if(this.selectedItem.length == 0){
					this.$common.errorToShow('请选择标签')
					return
				}
				this.matchShow=true
			},
			// 搜索标签
			onSearch(e){
				this.like = e.detail.value
				this.get_last()
			},
			selectedWait(){
				this._selected = true
			},
			deleteWait(){
				this._selected = false
			},
			selectedTag(parentList, indexs) {
			    // 获取父列表的索引
			    const parentIndex = this.list.findIndex(item => item.list === parentList);
			    
			    // 标记选中的子项
				// this.$set(this.list[parentIndex].list[indexs], 'selected', true);
				// this.list[parentIndex].list.filter(item => item.selected).map(item => {
				// 	this.selectedItem.push(item)
				// });
				// const uniqueSelectedItems = [...new Set(this.selectedItem)];
				// this.selectedItem = uniqueSelectedItems;
				
				if(this.list[parentIndex].list[indexs].selected){
					if(this.list[parentIndex].tip != 'single'){
						this.deleteTag(parentList, indexs)
					}
				}else{
					this.$set(this.list[parentIndex].list[indexs], 'selected', true);
					if(this.list[parentIndex].tip == 'single'){
						this.list[parentIndex].list.forEach((ite,idx)=>{
							// if(idx == indexs){
								ite.selected = false
							// }
						})
						this.selectedItem= [this.list[parentIndex].list[indexs]]
						this.list[parentIndex].list[indexs].selected = true
					}else{
						this.list[parentIndex].list.filter(item => item.selected).map(item => {
							this.selectedItem.push(item)
						});
					}
					
					
					const uniqueSelectedItems = [...new Set(this.selectedItem)];
					this.selectedItem = uniqueSelectedItems.filter(item => item.selected)
				}
			
			},
			deleteTag(parentList,indexs){
				// const parentIndex = this.list.findIndex(item => item.list === parentList);
				// this.$set(this.list[parentIndex].list[indexs], 'selected', false);
				const parentIndex = this.list.findIndex(item => item.list === parentList);
				    
				    // 获取要删除的子项
				    const itemToDelete = this.list[parentIndex].list[indexs];
				    
				    // 在 this.selectedItem 中过滤掉要删除的子项
				    this.selectedItem = this.selectedItem.filter(item => item !== itemToDelete);
				    
				    // 清除该子项的 'selected' 标记
				    this.$set(this.list[parentIndex].list[indexs], 'selected', false);
				    
				    
				    console.log('x->', this.selectedItem);
					
				
			},
			star_task(){
				if(this.selectedItem.length == 0){
					this.tip_ids = 0;
				}else{
					//选中的id？的的
					this.tip_ids=this.selectedItem.map(item => item.id).join(",")
				}
				
				this.matchShow = false;
				//把当前id 存入缓存
				uni.setStorageSync("tip_ids",this.tip_ids);
				this.$go('/showcase/tip/matchResults?stype='+this.type)
				
			},
			looks(item){
				this.moreShow=true
				this.info=item
			},
			get_last(){
				let that = this;
				this.loading = true
				this.$api.default.request('index/get_tag_class_taitai', {
					like: this.like
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.list = res.data
						this.loading = false
					}
				})
			},
			close(){
				this.moreShow = false
			},
			open(){
				console.log('open')
			},
			matchClose(){
				this.matchShow = false
			},
			chooseType(type){
				this.type = type
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 20rpx 30rpx;
		
		.serbox {
			display: flex;
			align-items: center;
			background: #F8F8F8;
			border-radius: 142px;
			height: 72rpx;
			padding: 0 26.66rpx;
			margin-bottom: 10rpx;

			.serpic {
				width: 32rpx;
				height: 32rpx;
				flex-shrink: 0;
			}

			.serput {
				padding: 0 16rpx;
				width: 500rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.tip_wrap {
			padding: 30rpx;
			padding-bottom: 10rpx;
			// margin-bottom: 60rpx;
			.header {
				display: flex;
				align-items: center;

				img {
					width: 36rpx;
					height: 36rpx;
					margin-right: 12rpx;
					object-fit: contain;
				}
				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 12rpx;
					object-fit: contain;
				}

				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #3D3D3D;

					.choose {
						margin-bottom: auto;
						font-size: 24rpx;
						font-weight: normal;
						color: #999999;
						margin-left: 16rpx;
					}
				}

				.more {
					border-radius: 24rpx;
					padding: 6rpx 20rpx;
					box-sizing: border-box;
					border: 1px solid #45C4B0;
					font-size: 24rpx;
					color: #45C4B0;
					text-align: center;
					margin-left: auto;
				}
			}
			
			.wrap-scroll{
				height: calc(100vh - 300rpx);
				padding-top: 15rpx;
			}
	
			.wrap {
				margin-top: 30rpx;
				display: grid;
				grid-gap: 28rpx 24rpx;
				justify-content: space-between;
				// grid-template-columns: repeat(auto-fill, 214rpx);
				grid-template-columns: repeat(auto-fill, 175rpx);
				
				.act {
					background: rgba(69, 196, 176, 0.07) !important;
				}
				.tag {
					width: 182rpx;
					height: 68rpx;
					border-radius: 8rpx;
					
					background: rgba(216, 216, 216, 0.3);
					position: relative;
					font-size: 28rpx;
					text-align: center;
					line-height: 68rpx;
					color: #3D3D3D;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;

					.hot_img {
						width: 30px;
						height: 21px;
						position: absolute;
						top: -10px;
						right: -10px;
					}
				}
			}
		}
		.footer{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0px -4px 10px 0px rgba(69, 196, 176, 0.2);
			display: flex;
			justify-content: center;
			align-items: center;
			.wrap{
				width: 630rpx;
				height: 80rpx;
				border-radius: 24rpx;
				background: #3D3D3D;
				display: flex;
				justify-content: space-between;
				.wrap_left{
					display: flex;
					flex-direction: column;
					padding-left: 20rpx;
					box-sizing: border-box;
					padding-top: 4rpx;
					.top{
						font-size: 28rpx;
						font-weight: bold;
						.choose{
							background: linear-gradient(293deg, #45C4B0 -5%, #56E8B5 128%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							background-clip: text;
							text-fill-color: transparent;
						}
						.num{
							color: #FFFFFF;
							margin-left: 8rpx;
						}
					}
					.bottom{
						font-size: 20rpx;
						color: #999999;
					}
				}
				.wrap_right{
					width: 190rpx;
					height: 100%;
					border-radius: 24rpx;
					background: #45C4B0;
					font-size: 24rpx;
					font-weight: bold;
					text-align: center;
					line-height: 80rpx;
					color: #FFFFFF;
				}
			}
		}
		.popup__content{
			padding-top: 60px;
			width: 600rpx;
			height: calc(100vh - 100px);
			box-sizing: border-box;
			background: #FFFFFF;
		}
		.u-popup__content {
			background-color: #FFFFFF !important; 
			padding: 30rpx;
			box-sizing: border-box;
			.choose{
				font-size: 24rpx;
				color: #999999;
				margin-top: 8rpx;
			}
			.wrap {
				grid-gap: 20rpx 20rpx;
				// grid-template-columns: repeat(auto-fill, 182rpx);
				grid-template-columns: repeat(auto-fill, 135rpx);
				
				.tag{
					width: 182rpx;
					height: 68rpx;
					line-height: 68rpx;
				}
			}
		}
		.match_content{
			padding: 30rpx;
			// height: 400rpx;
			box-sizing: border-box;
			.title{
				font-size: 28rpx;
				font-weight: bold;
				color: #3D3D3D;
			}
			.choose_list{
				display: flex;
				justify-content: space-between;
				margin-top: 18rpx;
				.active{
					background: #FFFFFF;
					border: 6rpx solid #45C4B0;
					.selected{
						display: block;
					}
				}
				
				.item{
					width: calc((100% - 60rpx)/2);
					height: 258rpx;
					border-radius: 24rpx;
					background: rgba(153, 153, 153, 0.07);
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					.selected{
						width: 70rpx;
						height: 50rpx;
						background: url('https://cdnauth.dreamyuewen.com/match_selected.png') no-repeat;
						background-size: contain;
						position: absolute;
						bottom: 0;
						right: -6rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.match_img{
						width: 72rpx;
						height: 72rpx;
						border: 1rpx dashed #eee;
						margin-top: 50rpx;
					}
					.tit{
						font-size: 32rpx;
						font-weight: bold;
						color: #3D3D3D;
						margin: 12rpx 0 8rpx;
					}
					.info{
						font-size: 20rpx;
						color: #999999;
					}
				}
			}
			.submit{
				margin-top: 40rpx !important;
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
				font-weight: bold;
				text-align: center;
				color: #FFFFFF;
				background: #45C4B0 !important;
			}
		}
	}
</style>